import React from 'react'
import TodoItem from './TodoItem'
import TodoFooter from './TodoFooter'

export default class TodoApp extends React.Component{
    state ={
        editing: null,
        nowShowing:'all'
    };

    clearCompleted() {
        this.props.actions.clearCompleted()
    }

    toggleAll() {
        this.props.actions.completeAll()
    }

    toggle(id) {
       this.props.actions.completeTodo(id)
    }

    edit(todo) {
        this.setState({
            editing: todo.id
        });

    }

    save(todoToSave, text) {
        this.props.actions.editTodo(todoToSave.id, text);
        this.setState({editing:null})
    }

    cancel() {
        this.setState({editing: null});
    }

    showAll(){
        this.setState({
            nowShowing:'all',
        })
    }

    showActive(){
        this.setState({
            nowShowing:'active',
        })
    }

    showCompleted(){
        this.setState({
            nowShowing:'completed',
        })
    }

    handleData(e) {
        this.setState({
            val: e.target.value
        });
    }

    handleNewTodoKeyDown(e) {
        if (e.keyCode !== 13) {
            return;
        }

        let text = e.target.value;
        if(text){
            this.props.actions.addTodo(text);
            this.setState({val: '' });
            e.target.value=''
        }
    }
    onDelete(id) {
        this.props.actions.deleteTodo(id)
        // this.setState({
        //     todos: this.state.todos.filter((elem, i) => index !== i)
        // })
    }

    render(){
        let footer;
        let main;
        let todos = this.props.todos;

        let shownTodos = todos.filter(function (todo) {
           switch (this.state.nowShowing) {
               case 'active':
                   return !todo.completed;
               case 'completed':
                   return todo.completed;
               default:
                   return true;
           }
        }, this);

        let todoItems = shownTodos.map(function (todo) {
           return (
        		<TodoItem
        			key={todo.id}
        			todo={todo}
        			onToggle={this.toggle.bind(this, todo.id)}
        			onEdit={this.edit.bind(this)}
        			editing={this.state.editing === todo.id}
        			onDestroy={this.onDelete.bind(this, todo.id)}
        			onSave={this.save.bind(this, todo)}
        			onCancel={this.cancel.bind(this)}
        		/>
           );
        }, this);

        let activeTodoCount = todos.reduce(function (count, todo) {
           return todo.completed ? count : count + 1;
        }, 0);

        let completedCount = todos.length - activeTodoCount;

        if (activeTodoCount || completedCount) {
        	footer =
        		<TodoFooter
                    count={activeTodoCount}
        			completedCount={completedCount}
        			showAll={this.showAll.bind(this)}
        			showActive={this.showActive.bind(this)}
        			showCompleted={this.showCompleted.bind(this)}
        			nowShowing={this.state.nowShowing}
        			onClearCompleted={this.clearCompleted.bind(this)}
        		/>;
        }

        if (todos.length) {
        	main = (
        		<section className="main">
        			<input
        				className="toggle-all"
        				type="checkbox"
        				onChange={this.toggleAll.bind(this)}
        				checked={activeTodoCount === 0}
        			/>
        				<ul className="todo-list">
        					{todoItems}
        				</ul>
        		</section>
        	);
        }

        return(
            <div>
                <header className="header">
                    <h1>todos</h1>
                    <input
                        className="new-todo"
                        placeholder="What needs to be done?"
                        onKeyDown={this.handleNewTodoKeyDown.bind(this)}
                        onChange={this.handleData.bind(this)}
                    />
                </header>
                {main}
                {footer}
            </div>);
    }
}